<template>
    <div>
      <Card class="clearfix" style="padding-bottom: 100px">
        <p slot="title">
         日志列表
        </p>

        <Row>
          <i-col span="24">
            <i-col span="2">
                <Input  v-model="functionalName"  @on-change="searchFunctionalName" placeholder="功能名称" icon="search" style="width: 120px" />
            </i-col>
            <i-col span="2" >
                <Select v-model="functionalStatus" @on-change="searchLogOperationState" clearable style="width:120px" placeholder="操作状态">
                    <Option v-for="item in logOperationStateList" :value="item.key" :key="item.id">{{ item.value }}</Option>
                </Select>
            </i-col>
            <i-col span="2">
                <DatePicker  @on-change="searchStartTime"  :value="startTime"  type="date"   placeholder="开始时间" style="width: 120px"></DatePicker >
                --
            </i-col>
            <i-col span="2">
                <DatePicker  @on-change="searchEndTime"   :value="endTime"  type="date"  placeholder="结束时间" style="width: 120px"></DatePicker >
            </i-col>
            <i-col span="2" >
                <Input v-model="userName" @on-change="searchUserName" placeholder="请输入姓名" icon="search" style="width: 120px" />
            </i-col>
            <i-col span="2">
                <Button  @click="emptySearch" v-bind:style="{width: 90 + 'px' }" type="primary">清空检索</Button>
            </i-col>
          </i-col>
        </Row>
        <br>
        <Row >

          <i-col gutter="100">
                <can-edit-table refs="table1" v-model="tableData" :table-data="tableData"></can-edit-table>
          </i-col>
          <Page ref="pages" :total="recordCount" show-total style="float: right; margin-top: 20px" @on-change="searchMethod"></Page>
        </Row>
      </Card>
    </div>

</template>

<script>
import ajax from '../../../libs/axios.js'
import canEditTable from './components/columnsTable.vue'
import Vue from 'vue'
export default {
    name: 'logmanagement_index',
    components: {
        canEditTable
    },
    data () {
        return {
            startTime: '',
            endTime: '',
            functionalName: '',
            functionalStatus: '',
            userName: '',
            columnsList: [],
            tableData: [],
            recordCount: 0,
            showCurrentTableData: false,
            logOperationStateList: [],
            page: ''
        }
    },
    methods: {
        // 获取数据
        getData (page) {
            let url = '/adminapi/logmanagement/logManagementList.html'
            let data = {
                pageNumber: page,
                pageSize: 10
            }
            ajax.jsonRes(url, data).then(res => {
            // success
            // this.columnsList = tableData.table1Columns;
                let list = res.list
                this.addStatusName(list)
                this.tableData = res.list
                this.recordCount = res.recordCount
            }).catch(res => {
                console.log('获取日志数据有错误信息')
            // fail
            })
        },
        // 添加字段
        addStatusName (list) {
            // 1.新增	2.修改	3.删除  4.批量删除
            for (let index = 0; index < list.length; index++) {
                const element = list[index]
                Vue.set(element, 'statusName', 2)
                if (element.operationstatus === 1) {
                    element.statusName = '新增'
                } else if (element.operationstatus === 2) {
                    element.statusName = '修改'
                } else if (element.operationstatus === 3) {
                    element.statusName = '删除'
                } else if (element.operationstatus === 4) {
                    element.statusName = '批量删除'
                }
            }
        },
        getEnum () {
            let url = '/adminapi/logmanagement/getLogOperationStateEnum.html'
            ajax.jsonRes(url).then(res => {
            // success
                this.logOperationStateList = res
            }).catch(res => {
                console.log('获取状态枚举有错误信息')
            // fail
            })
        },
        searchLogOperationState () {
            this.searchMethod('1')
        },
        // 检索方法
        searchMethod (page) {
            let url = '/adminapi/logmanagement/logManagementList.html'
            let data = {
                startTime: this.startTime,
                endTime: this.endTime,
                functionName: this.functionalName,
                operationStatus: this.functionalStatus,
                operatorName: this.userName,
                page: page,
                pageNumber: page,
                pageSize: 10
            }
            ajax.jsonRes(url, data).then(res => {
                // success
                this.addStatusName(res.list)
                this.tableData = res.list
                this.recordCount = res.recordCount
            }).catch(res => {
                // fail
            })
        },
        // 功能名称检索
        searchFunctionalName () {
            this.searchMethod('1')
        },
        // 功能状态检索
        searchFunctionalStatus () {
            this.searchMethod('1')
        },
        // 开始时间检索
        searchStartTime (time) {
            this.startTime = time
            this.searchMethod('1')
        },
        // 结束时间检索
        searchEndTime (time) {
            this.endTime = time
            this.searchMethod('1')
        },
        // 检索用户名称
        searchUserName () {
            this.searchMethod('1')
        },
        emptySearch () {
            this.functionalName = ''
            this.functionalStatus = ''
            this.startTime = ''
            this.endTime = ''
            this.userName = ''
        }
    },
    created () {
        this.getEnum()
        this.getData('1')
    }
}
</script>
